.image-container{
    position: relative;
    height: 300px;
    width: 300px;
    box-sizing: border-box;
    border: 1px solid #aaa;
    margin: 100px auto 0px auto;
}
.origin-img{
    position: relative;
    height: 300px;
    width: 300px;
    box-sizing: border-box;
    margin: 100px auto 0px auto;    
    background: url('../../assets/gaoyuanyuan.jpg') no-repeat center;
    background-size: 100% 100%;
}
.demo{
    height: 300px;
    width: 300px;
    position: relative;
    margin: 0px auto 0px auto;
    border: 1px solid #aaa;
}
.image-resize{
    position: absolute;
    height: 70px;
    width: 140px;
    border: 1px solid #bbbbbb;
    top: 20px;
    left: 20px;
    .z-dot{
        position: absolute;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background-color: #494949;
        z-index: 10;
    }
    .z-dot-top-left{
        cursor: move;
        top: -5px;
        left: -5px;
    }
    .z-dot-top-mid{
        cursor: n-resize;
        top: -5px;
        left: 65px;
    }
    .z-dot-top-right{
        cursor: move;
        top: -5px;
        right: -5px;
    }
    .z-dot-right-mid {
        cursor: e-resize;
        top: 30px;
        right: -5px;
    }
    .z-dot-bottom-left {
        cursor: move;
        bottom: -5px;
        left: -5px;
    }
    .z-dot-bottom-mid{
        cursor: n-resize;
        bottom: -5px;
        left: 65px;
    }
    .z-dot-bottom-right{
        cursor: move;
        bottom: -5px;
        right: -5px;
    }
    .z-dot-left-mid{
        cursor: e-resize;
        top: 30px;
        left: -5px;
    }
    .z-content {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        width: 100%;
        z-index: 1;
        background-color: blanchedalmond;
    }
}